<template>
  <footer class="footer">
    <div class="container">
      <!-- 服务保障 -->
      <div class="service-guarantee">
        <div class="service-item">
          <span class="icon">✔️</span>
          <div class="text">
            <h4>正品保障</h4>
            <p>正品行货 放心选购</p>
          </div>
        </div>
        <div class="service-item">
          <span class="icon">🚚</span>
          <div class="text">
            <h4>极速配送</h4>
            <p>多仓直发 极速配送</p>
          </div>
        </div>
        <div class="service-item">
          <span class="icon">💰</span>
          <div class="text">
            <h4>无忧退换</h4>
            <p>7天无理由退换</p>
          </div>
        </div>
        <div class="service-item">
          <span class="icon">🎯</span>
          <div class="text">
            <h4>专业服务</h4>
            <p>专业客服 贴心服务</p>
          </div>
        </div>
      </div>

      <!-- 帮助中心 -->
      <div class="help-section">
        <div class="help-item">
          <h3>购物指南</h3>
          <ul>
            <li>购物流程</li>
            <li>会员介绍</li>
            <li>常见问题</li>
          </ul>
        </div>
        <div class="help-item">
          <h3>配送方式</h3>
          <ul>
            <li>上门自提</li>
            <li>快递配送</li>
            <li>配送范围</li>
          </ul>
        </div>
        <div class="help-item">
          <h3>支付方式</h3>
          <ul>
            <li>货到付款</li>
            <li>在线支付</li>
            <li>分期付款</li>
          </ul>
        </div>
        <div class="help-item">
          <h3>售后服务</h3>
          <ul>
            <li>退款说明</li>
            <li>退换货流程</li>
            <li>维修/保养</li>
          </ul>
        </div>
        <div class="help-item">
          <h3>关于我们</h3>
          <ul>
            <li>公司简介</li>
            <li>服务协议</li>
            <li>联系我们</li>
          </ul>
        </div>
      </div>

      <!-- 版权信息 -->
      <div class="copyright">
        <p>Copyright © 2024 电商平台 All Rights Reserved.</p>
        <p>
          <span>工商备案号：XXXXXXXXXX</span>
          <span>|</span>
          <span>增值电信业务经营许可证：XXXXXXXXXX</span>
        </p>
      </div>
    </div>
  </footer>
</template>

<script setup>
// 使用组合式API
</script>

<style scoped>
.footer {
  background-color: #f8f8f8;
  padding: 40px 0 20px;
  margin-top: 60px;
  border-top: 1px solid var(--border-color);
}

.container {
  width: 1200px;
  margin: 0 auto;
}

/* 服务保障样式 */
.service-guarantee {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
}

.service-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.service-item .icon {
  font-size: 24px;
  margin-right: 10px;
}

.service-item h4 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}

.service-item p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 帮助中心样式 */
.help-section {
  display: flex;
  justify-content: space-between;
  padding: 40px 0;
}

.help-item {
  flex: 1;
  padding: 0 20px;
}

.help-item h3 {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.help-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-item li {
  font-size: 14px;
  color: var(--text-regular);
  margin-bottom: 10px;
  cursor: pointer;
}

.help-item li:hover {
  color: var(--primary-color);
}

/* 版权信息样式 */
.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.copyright p {
  margin: 5px 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.copyright span {
  margin: 0 10px;
}
</style>